// components/loading-card/index.js
const {
  aiCreationApi
} = require('../../api/index')
Component({
  lifetimes: {
    attached() {
      // console.log('attached',wx.createCanvasContext('waveCanvas', this));
      let size = wx.getStorageSync('createImgInfo').size
      this.setData({
        url: wx.getStorageSync('createImgInfo').url,
        height: size === 1 ? 370 : size === 16 ? 208 : 490
      })
    },
    ready() {
      this.setData({
        ctx: wx.createCanvasContext('waveCanvas', this)
      })
      this.rise()
      // this.drawWave();
      this.moveWave()
    },
  },

  /**
   * 组件的属性列表
   */
  properties: {
    index: {
      type: Number,
      value: 100
    },
    createtitle: {
      type: String,
      value: ""
    },
    spacetype: {
      type: String,
      value: ""
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    isLoading: true, //加载中
    resObj: null, //生图结果
    waveOffset: 0,
    num: 0, //进度
    timer: null,
    url: '',
    height: 208, //卡片高度
    ctx: null, //canvas上下文
    canvasW: 100,
    canvasH: 100,
    step: 1.5,
    stepHeight: -1,
    trigger: true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 生成随机数
    getRandomInt(min, max) {
      // min 是最小值，max 是最大值  
      min = Math.ceil(min); // 向上取整  
      max = Math.floor(max); // 向下取整  
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    // 进度上涨
    rise() {
      this.setData({
        num: this.getRandomInt(10, 50)
      })
      this.timer = setInterval(() => {
        if (this.data.num >= 99) {
          this.setData({
            num: 99,
            timer: null
          })
          clearInterval(this.timer)
          return
        }
        this.setData({
          num: this.data.num += 1
        })
      }, 300)
    },
    // 生图成功回调
    createImgSuccess(res) {
      this.setData({
        resObj: res
      })
      // console.log('生图成功回调', this.data.resObj);
    },
    // 反馈生图问题
    async feedback() {
      // console.log('反馈');
      try {
        let res = await aiCreationApi.feedback({
          ImageFeedBackParams: {
            FeedBackType: 10,
            TaskId: wx.getStorageSync('createImgInfo')?.taskId
          }
        })
        // console.log('反馈成功', res);
        wx.showToast({
          title: '反馈成功',
          icon: "success"
        })
      } catch (error) {
        // console.log('反馈失败', error);
        wx.showToast({
          title: '反馈失败',
          icon: "error"
        })
      }
    },
    // 预览大图
    toPreview() {
      wx.redirectTo({
        url: `/pages/ai/creationComplete/index?type=1&createtitle=${this.properties.createtitle}&spacetype=${this.properties.spacetype}`,
      })
    },
    // 波浪1
    drawWave() {
      // console.log('1111', this.canvasCenter().y);
      this.data.ctx.beginPath()
      this.data.ctx.moveTo(0, this.canvasCenter().y)
      this.data.ctx.setStrokeStyle("#FFC14E")
      this.data.ctx.setLineWidth(1)
      for (let i = 0; i < this.data.step * 3; i++) {
        if (i % 2 == 0) {
          this.data.ctx.quadraticCurveTo(this.stepWave() * (i) + this.stepWave() / 2, this.canvasCenter().y + this
            .stepWaveHeight(), this.stepWave() * (i + 1), this.canvasCenter().y)
        } else {
          this.data.ctx.quadraticCurveTo(this.stepWave() * (i) + this.stepWave() / 2, this.canvasCenter().y - this
            .stepWaveHeight(), this.stepWave() * (i + 1), this.canvasCenter().y)
        }
      }
      this.data.ctx.lineTo(this.canvasWidth(), this.canvasHeight())
      this.data.ctx.lineTo(0, this.canvasHeight())
      this.data.ctx.closePath()

      let grad = this.data.ctx.createLinearGradient(0, 0, 0, this.canvasHeight());
      grad.addColorStop(0, '#FFC14E')
      grad.addColorStop(1, '#FFC14E')
      this.data.ctx.setFillStyle(grad)

      this.data.ctx.fill()
      this.data.ctx.stroke()
      this.data.ctx.draw()
    },
    // 波浪2
    drawWave2(offset) {
      this.data.ctx.beginPath()
      this.data.ctx.moveTo(0, this.canvasCenter().y)
      this.data.ctx.setStrokeStyle("#FFC14E")
      this.data.ctx.setLineWidth(1)
      for (let i = 0; i < this.data.step * 3; i++) {
        if (i % 2 == 0) {
          this.data.ctx.quadraticCurveTo(this.stepWave() * (i) + this.stepWave() / 2 + offset, this.canvasCenter().y + this
            .stepWaveHeight(), this.stepWave() * (i + 1) + offset, this.canvasCenter().y)
        } else {
          this.data.ctx.quadraticCurveTo(this.stepWave() * (i) + this.stepWave() / 2 + offset, this.canvasCenter().y - this
            .stepWaveHeight(), this.stepWave() * (i + 1) + offset, this.canvasCenter().y)
        }
      }
      this.data.ctx.lineTo(this.stepWave() * (this.data.step * 2 + 3) + offset, this.canvasHeight())
      this.data.ctx.lineTo(0 + offset, this.canvasHeight())
      this.data.ctx.closePath()

      let grad = this.data.ctx.createLinearGradient(0, 0, 0, this.canvasHeight());
      grad.addColorStop(0, '#FFC14E')
      grad.addColorStop(1, '#FFC14E')
      // this.ctx.setFillStyle('#3cee06')
      this.data.ctx.setFillStyle(grad)
      this.data.ctx.fill()
      this.data.ctx.stroke()
      this.data.ctx.draw()
    },
    // 计算位移波浪高度
    moveWave() {
      let offset = -this.stepWave() * 2
      setInterval(() => {
        offset++
        if (offset >= 0) {
          offset = -this.stepWave() * 2
        }
        if (this.data.stepHeight > -10) {
          this.trigger = true
        }
        if (this.data.stepHeight < -20) {
          this.trigger = false
        }
        if (this.trigger) {
          this.data.stepHeight -= 0.2
        } else {
          this.data.stepHeight += 0.2
        }
        this.drawWave2(offset)
      }, 50)
    },
    canvasWidth() {
      return this.data.canvasW / 2
    },
    canvasHeight() {
      return this.data.canvasH / 2
    },
    stepWave() {
      return (this.canvasWidth() / 2) / this.data.step
    },
    stepWaveHeight() {
      return this.data.stepHeight / 2
    },
    canvasCenter() {
      return {
        x: this.canvasWidth() / 2,
        y: this.canvasHeight() / 2
      }
    },
  }
})